<template>
<!-- 导航栏标签 -->
    <footer style="z-index: 99;">
      <ul style="margin: revert;">
        <!-- vue-router路由的应用
        <a href="/#/verted">显示verted</a> -->

        <!-- active-class属性：那个显示赋予那个class样式;  原理：利用location.hash和window.onhashchange监听链接的变化
        to的动态用法=> :to=" '/verted' ";   tag标签模拟；

         *这些都是vue-router3版本及之前支持
          <router-link to='/verted' active-class="myclass" tag="span">
            <li :class="isActive? 'myclass':''" @click="navigate" >

              <span class="iconfont">&#xe610;</span>
              <span>显示Verted</span>
            </li>
          </router-link> -->

          <router-link to='/verted' custom v-slot="{navigate,isActive}">
            <li :class="isActive? 'myclass':''" @click="navigate" >
              <!-- 这一句引用的阿里库，素材在public文件夹里，在index文件中导入 **重要**-->
              <span class="iconfont">&#xe610;</span>
              <span>显示Verted</span>
            </li>
          </router-link>

           <!-- *vue-router4的写法，除了to内的值 写法固定，这是一种插槽写法。
            {}中navigate表示一个函数，选中时被调用；isActive表示是否被选中，是一个布尔值 -->
          <router-link to='/conter' custom v-slot="{navigate,isActive}">
            <li :class="isActive? 'myclass':''" @click="navigate" >
              <span class="iconfont">&#xe611;</span>
              <span>显示Conter</span>
            </li>
          </router-link>

          <router-link to='/films' custom v-slot="{navigate,isActive}">
            <li :class="isActive? 'myclass':''" @click="navigate" >
              <span class="iconfont">&#xe613;</span>
              <span>显示Films</span>
            </li>
          </router-link>

          <!-- 记得清本地存储 -->
            <router-link to='/login' custom v-slot="{navigate,isActive}">
              <li :class="isActive? 'myclass':''" @click="navigate" >
                <span class="iconfont">&#xe614;</span>
                <span>登录模拟</span>
              </li>
            </router-link>

      </ul>
    </footer>
</template>

<script>

export default {
  
}
</script>

<style lang='scss' scoped>
  .iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  .myclass{
    color:deepskyblue;
  }

  footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3.2rem;
    background:aliceblue;
    ul{
      display: flex;
      list-style: none;
      li{
        flex: 1;
        line-height: 1.4rem;
        text-align:center;
        // 下面是将内容竖向显示
        // display: flex;
        // flex-direction: column;

      }
    }
  }
</style>
